<template>
  <div
    class="cardData"
    :style="{ ...customStyle, top: top + 'px', left: left + 'px',position:(position ? 'absolute' : 'static'),padding: `${gutterY}px ${gutterX}px`}"
  >
    <span v-if="text" :style="{ ...textStyle }">{{ text }}</span>
    <div
      class="circle"
      :style="{
        background: StatusColorByData,
        width: formatUnit(width),
        height: formatUnit(height),
      }"
    ></div>
  </div>
</template>

<script setup>
import { computed, watch } from "vue";
import { useRouter } from "vue-router";
import { color as colors } from "@/mixins/globalParam.js";
import sys from "@/assets/image/sysend.png";
// store
import { storeToRefs } from "pinia";
// import { useErrorStore } from "@/store/errorStore.js"
// let {errorInfo} = storeToRefs(useErrorStore())
let props = defineProps({
  position:{
    type:Boolean,
    default:true
  },
  gutterX:{
    type:Number,
    default:0
  },
  gutterY:{
    type:Number,
    default:0
  },
  point: {
    type: Number,
    // require:true,
  },
  data: {
    type: Number,
    // require:true
  },
  customStyle: {
    type: Object,
    default: {},
  },
  top: {
    type: [Number,String],
    default: 0,
  },
  text: {
    type: String,
  },
  textStyle: {
    type: Object,
  },
  left: {
    type: [Number,String],
    default: 0,
  },
  judgMent: {
    type: Boolean,
    default: false,
  },
  width: {
    type: [Number,String],
    default: 20,
  },
  height: {
    type: [Number,String],
    default: 20,
  },
  colorId: {
    type: Number,
    default: 0,
  },
  open: {
    type: String,
    default: "=",
  },
});
let dataFormal = computed(() => {
  return Number(props.data).toFixed(props.decimal);
});
watch(
  () => props.data,
  (newV, oldV) => {
    // console.log('=============', newV, oldV)
  }
);
// 计算属性
let formatUnit = computed(()=>{
  return (value) => typeof value == 'number' ? value + 'px' : value;
})
let StatusColorByData = computed(() => {
  if (props.judgMent) return colors[props.colorId];
  if (props.open == "=") {
    if ((props.data = props.point)) return colors[1];
    else return colors[0];
  }
  if (props.open == ">") {
    if (props.data > props.point) return colors[1];
    else return colors[0];
  }
  if (props.open == "<") {
    if (props.data < props.point) return colors[1];
    else return colors[0];
  }
});

let StylePadding = computed(()=>{
  return String(props.gutterY + " " + props.gutterX)
})
let router = useRouter();
// 路由
let goToDataDetail = () => {
  router.push({
    path: "/detail",
  });
};
</script>

<style scoped lang="scss">
.cardData {
  position: absolute;
  display: flex;
  align-items: center;
  // border-radius: 100%;
  cursor: pointer;
  font-size: 25px;
  .circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
}
</style>
